<template>
    <div class='loader'>
        <div class='loader_overlay'></div>
        <div class='loader_cogs'>
            <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
            </div>
            <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
            </div>
            <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'><!-- lol --></div>
            </div>
        </div>
        <div class="table">
            <div class="table-cell">
                <mu-paper class="config" :z-depth="5">
                    <h1>配置</h1>
                    <h2>
                      <!-- <mu-select label="协议类型" v-model="httpType" @change="changeHttpType">
                        <mu-option v-for="(option, index) in options" :key="option" :label="option" :value="option"></mu-option>
                      </mu-select> -->
                      协议类型：<mu-switch v-model="httpTypeFlag" :label="'HTTPS: ' + httpTypeFlag" @change="changeHttpType"></mu-switch>
                    </h2>
                    <h2>
                      <mu-text-field v-model="value" @keyup.enter.native="config" placeholder="xxx.xxx.x.x"><i class="iconfont icon-saomiao" @click="scan('config')"></i></mu-text-field><br/>
                    </h2>
                </mu-paper>
            </div>
        </div>
        <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
    </div>
</template>
<script>
import scanning from "@/components/scanning"
export default {
    components: {
      scanning
    },
    data () {
        return {
          scanMark: '',
          isScanning: false,
          value: '',
          httpTypeFlag: true,
          httpType: "https",
          options: ['https', 'http']
        }
    },
    methods: {
        closeing (val) {
          val ? this.isScanning = false : null;
        },
        childByValue (val) {
          if(val){
            if(val.split('&')[1] == 'vin'){
            }else if(val.split('&')[1] == 'config'){
              this.value = val.split('&')[0];
              this.config();
            }
          }
        },
        changeHttpType (v) {
          if(v){
            localStorage.setItem('httpTypeFlag', v);
            // localStorage.setItem('httpType', v);
          }
        },
        scan (txt) {
          this.scanMark = txt;
          this.isScanning = true;
        },
        config () {
          if(this.value){
            localStorage.setItem('httpTypeFlag', this.httpTypeFlag);
            // localStorage.setItem('httpType', this.httpType);
            localStorage.setItem('myLocalhost', this.value);
            this.$router.push({name:'login'})
          }else{
            this.Toast({
              duration: 1500,
              mask: true,
              message: '配置不能为空'
            });
          }
        }
    },
    mounted () {
      // 检查缓存v
      let mylocalhost = localStorage.getItem('myLocalhost');
      mylocalhost ? this.$router.push({name:'login'}) : null
      //this.common.tts('哇，这个神奇的页面都被你找到了,有点凶啊，兄弟');
    }
}
</script>
<style scrope>
body .loader {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  margin: auto;
  text-align: center;
}
body .loader_overlay {
  width: 150px;
  height: 150px;
  background: transparent;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs {
  z-index: -2;
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__top {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
          transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
          animation: rotate 10s infinite linear;
}
body .loader_cogs__top div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__top div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__top div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__top div.top_part {
  width: 100px;
  border-radius: 10px;
  position: absolute;
  height: 100px;
  background: #f98db9;
}
body .loader_cogs__top div.top_hole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__left {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
          transform-origin: 40px 40px;
  animation: rotate_left 10s 0.1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
body .loader_cogs__left div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__left div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__left div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__left div.left_part {
  width: 80px;
  border-radius: 6px;
  position: absolute;
  height: 80px;
  background: #97ddff;
}
body .loader_cogs__left div.left_hole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__bottom {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
          transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s 0.4s infinite linear;
          animation: rotate_left 10.2s 0.4s infinite linear;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
body .loader_cogs__bottom div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__bottom div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__bottom div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__bottom div.bottom_part {
  width: 60px;
  border-radius: 5px;
  position: absolute;
  height: 60px;
  background: #ffcd66;
}
body .loader_cogs__bottom div.bottom_hole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.table{
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}
.config{
    width: 80%;
    margin: 0 auto 0;
    padding: 1em 0;
    background-color: rgba(255, 255, 255, 0.45);
}
/* Animations */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}

</style>
